<template>
    <div>
        <el-menu
          default-active="/ZwQy"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
            <el-menu-item-group>
                <div class="tou">
                <el-menu-item @click="comName= 'ZwQy'">桌位区域</el-menu-item>
                <el-menu-item @click="comName = 'ZwLb'">桌位列表</el-menu-item>
                </div>
            </el-menu-item-group>
        </el-menu>
       <component :is="comName">
    </component>
    </div>
</template>

<script>
import ZwLb from "@/components/zhaobaoyi/zwgl/ZwLb.vue"
import ZwQy from "@/components/zhaobaoyi/zwgl/ZwQy.vue"
    export default {
        data(){
            return {
                comName:"ZwQy"
            }
        },
         methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
        },
         components:{
            ZwLb, ZwQy
        }
    }
</script>

<style scoped>
   .tou{
    display: flex;
    border: solid 1px #000;
    height: 40px;
   }
   .el-menu-item{
    line-height:40px;
    height:40px;
    border: solid 1px #000;
   }
</style>